<%--
  Created by IntelliJ IDEA.
  User: WuYixin
  Date: 2022/6/9
  Time: 08:03
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <title>注册界面</title>
    <link rel="stylesheet" href="resource/bs/css/bootstrap.min.css">
</head>
<body>

<style type="text/css">
    body{
        margin:0px;
        padding:0px;
    }
    .box{
        position:absolute;
        /*定位方式绝对定位absolute*/
        top:50%;
        left:50%;
        /*顶和高同时设置50%实现的是同时水平垂直居中效果*/
        transform:translate(-50%,-50%);
        /*实现块元素百分比下居中*/
        width:350px;
        height: 350px;
        /*padding:40px;*/
        background: rgba(0,0,0,0.05);
        /*背景颜色为黑色，透明度为0.05*/
        box-sizing:border-box;
        /*box-sizing设置盒子模型的解析模式为怪异盒模型，
        将border和padding划归到width范围内*/
        box-shadow: 0px 15px 25px rgba(0,0,0,.5);
        /*边框阴影  水平阴影0 垂直阴影15px 模糊25px 颜色黑色透明度0.5*/
        border-radius:15px;
        /*边框圆角，四个角均为15px*/
    }
    /*控制按钮左右位置*/
    .left{
        position: absolute;
        left: 120px;
        top: 300px;
    }
    .right {
        position: absolute;
        right: 120px;
        top: 300px;
    }
</style>


<nav aria-label="breadcrumb">
    <ol class="breadcrumb">
        <li style="font-size: xx-large" >固定资产管理系统</li>
        <li class="breadcrumb-item" style="font-size: xx-large;"><a href="register.jsp">注册</a></li>
        <li class="breadcrumb-item" style="font-size: xx-large;"><a href="login.jsp">登录</a></li>
    </ol>
</nav>

<div class="box">

    <form action="RegisterServlet" method="post">
        <table style="margin-left:15%;height: 220px;">
            <h1 style="text-align: center">用户注册</h1>
            <tr>
                <td>工号：</td>
                <td><input name="no" type="text" size="25" placeholder="请输入用户号"></td>
            </tr>
            <tr>
                <td>输入密码: </td>
                <td><input name="password" type="password" size="25" placeholder="必须包含字符、数字、字母" onblur="pwdCheck(this)" id="pwd"></td>
            </tr>
            <tr>
                <td>确认密码: </td>
                <td><input name="password" type="password" size="25" placeholder="再次确认密码" οnkeyup="validate()" id="pwd2"></td>
            </tr>
            <tr>
                <td>姓名：</td>
                <td><input name="name" type="text" size="25" placeholder="请输入姓名"></td>
            </tr>
            <tr>
                <td>等级：</td>
                <td><input name="level" type="text" size="25" placeholder="请输入等级"></td>
            </tr>
            <tr>
                <td>电话：</td>
                <td><input name="phone" type="text" size="25" placeholder="请输入电话"></td>
            </tr>
            <tr>
                <td>年龄：</td>
                <td><input name="age" type="text" size="25" placeholder="请输入年龄"></td>
            </tr>
            <tr>
                <td>邮箱: </td>
                <td><input name="mail" type="text" size="25" placeholder="格式：123@123.com" onblur="emailCheck(this)" id="email"></td>
            </tr>
        </table>
        <input type="submit" value="注册" onclick="successClick()" class="left" >
        <input type="reset" value="重置" class="right">
    </form>
    <br>
</div>
</body>

<script language="javascript">
    /**密码校验**/
    function validate() {
        var pwd = document.getElementById("pwd").value;
        var pwd2 = document.getElementById("pwd2").value;
        if(pwd == pwd2) {
            document.getElementById("tishi").innerHTML="<font color='green'>两次密码相同</font>";
            document.getElementById("submit").disabled = false;
        }
        else {
            document.getElementById("tishi").innerHTML="<font color='red'>两次密码不相同</font>";
            document.getElementById("submit").disabled = true;
        }}
    function successClick(){
        alert("注册成功")
    }
    /**邮箱格式检查**/
    function emailCheck() {
        const emailStr = document.getElementById("email").value;
        const emailPat = /^(.+)@(.+)$/;
        const matchArray = emailStr.match(emailPat);
        if (matchArray == null) {
            alert("邮箱格式有误")
            return false;
        }
        return true;
    }
    /**密码格式检查**/
    function pwdCheck() {
        const emailStr = document.getElementById("pwd").value;
        const emailPat =/^(?=.*?[a-z])(?=.*?[A-Z])(?=.*?\d)(?=.*?[!#@*&.])[a-zA-Z\d!#@*&.]*$/;
        const matchArray = emailStr.match(emailPat);
        if (matchArray == null) {
            alert("密码必须包括大写字母，小写字母，数字和特殊字符")
            return false;
        }
        return true;
    }
</script>
</html>
